<template>
    <view class="header">
    <swiper  :indicator-dots="indicatorDots" :autoplay="autoplay" :circular="circular" :interval="interval"
        :duration="duration" @change="bindchange" previous-margin="125px" next-margin="125px">
            <block v-for="(item,index) in member" >
                    <swiper-item>
                          <view class="memberBg" :class="[item.class,swiperIndex == index ? 'active' : 'quiet']" mode='aspectFill'>
                                  <image :src='item.sian'></image>
                                  <view class='name'>{{item.name}}</view>
                                  <view class='discount'>可享受商品折扣: 9.8折<text class='iconfont icon-zhekou'></text></view>
                                  <view class='nav acea-row'>
                                        <view class='item'>
                                                <view class='num'>166</view>
                                                <view>积分数</view>
                                            </view>
                                        <view class='item'>
                                                <view class='num'>166</view>
                                                <view>消费金额</view>
                                            </view>
                                        <view class='item'>
                                                <view class='num'>166</view>
                                                <view>消费次数</view>
                                            </view>
                                      </view>
                                </view>
                        </swiper-item>
                    </block>
            </swiper>
        </view>
</template>

<script>
    export default {
        data() {
            return {
                member: [
                    {
                        'name': '钻石会员',
                        'sian': '/images/diamonds.png',
                        'class': 'diamonds'
                    },
                    {
                        'name': '黄金会员',
                        'sian': '/images/gold.png',
                        'class': 'gold'
                    },
                    {
                        'name': '白银会员',
                        'sian': '/images/silver.png',
                        'class': 'silver'
                    },
                    {
                        'name': '黄铜会员',
                        'sian': '/images/brass.png',
                        'class': 'brass'
                    },
                    {
                        'name': '青铜会员',
                        'sian': '/images/bronze.png',
                        'class': 'bronze'
                    },
                    {
                        'name': '普通会员',
                        'sian': '/images/ordinary.png',
                        'class': 'ordinary'
                    }
                ],
                indicatorDots: false,
                circular: true,
                autoplay: false,
                interval: 3000,
                duration: 500,
                swiperIndex: 0
            }
        },
        methods: {
            bindchange(e) {
                this.swiperIndex = e.detail.current;
            },
        }
    }
</script>

<style>
    .header{background-color:#232323;width:100%;padding:50rpx 0;}
    
    .header swiper{width:100%;height:328rpx;position:relative;}
    
    .header swiper-item .memberBg.active{transform: none;transition: all 0.2s ease-in 0s;}
    
    .header swiper-item .memberBg.quiet{ transform: scale(0.9);transition: all 0.2s ease-in 0s;}
    
    .header swiper-item .memberBg{width:100%;height:228upx;border-radius:16rpx;color:#fff;position:relative;}
    
    .header swiper-item .memberBg.diamonds{background-image: linear-gradient(to right,#a895dd 0%,#655cb0 100%);}
    
    .header swiper-item .memberBg.gold{background-image: linear-gradient(to right,#e3c072 0%,#cf9e51 100%);}
    
    .header swiper-item .memberBg.silver{background-image: linear-gradient(to right,#bebebe 0%,#929292 100%);}
    
    .header swiper-item .memberBg.brass{background-image: linear-gradient(to right,#e8cba7 0%,#caaf8f 100%);}
    
    .header swiper-item .memberBg.bronze{background-image: linear-gradient(to right,#9ab1c2 0%,#6a8493 100%);}
    
    .header swiper-item .memberBg.ordinary{background-image: linear-gradient(to right,#7aa7ed 0%,#6292de 100%);}
    
    .header swiper-item .memberBg image{width:89rpx;height:108rpx;display:block;position:absolute;right:60rpx;}
    
    .header swiper-item .memberBg .name{font-size:46rpx;font-weight:bold;padding:40rpx 0 0 35rpx;}
    
    .header swiper-item .memberBg .discount{font-size:28rpx;font-weight:bold;margin:15rpx 0 0 35rpx;}
    
    .header swiper-item .memberBg .discount .iconfont{margin-left:10rpx;font-size:30rpx;}
    
    .header swiper-item .memberBg .nav{margin-top:55rpx;}
    
    .header swiper-item .memberBg .nav .item .num{font-size:40rpx;color:#fff;font-family: 'Guildford Pro';}
    
    .header swiper-item .memberBg .nav .item~.item::before{position:absolute;width:2rpx;height:32rpx;background-color:rgba(255, 255, 255, 0.6);content:'';left:0;top:50%;transform:translateY(-50%);}
    
    .header swiper-item .memberBg .lock{font-size:26rpx;margin:73rpx 0 0 35rpx;}
    
    .header swiper-item .memberBg .lock .iconfont{font-size:37rpx;margin-right:15rpx;vertical-align:-4rpx;}
  
</style>
